<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-14 16:35:12
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-17 15:25:53
 * @FilePath: \cxl-h5\src\pages\personalCenter\message\detailed\Index.vue
-->
<template>
    <section class="message-detailed">
        <section class="box">
            <!-- <section :class="['msg-title', 'absolute']">{{ data.title }}</section> -->
            <section :class="['msg-title']">{{ data.title }}</section>
            <section class="msg-time">{{ data.time }}</section>
            <section class="msg-content" v-html="data.content"></section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import MessageDetailed from '.'
//初始化数据
const data = reactive(new MessageDetailed())
</script>

<style scoped lang="scss">
.message-detailed {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    .box {
        box-sizing: border-box;
        padding: 0 var(--cxl-size-16) var(--cxl-size-16) var(--cxl-size-16);
        margin-bottom: env(safe-area-inset-bottom);
        .msg-title {
            font-size: var(--cxl-size-24);
            font-weight: 600;
            padding-top: var(--cxl-size-28);

            &.absolute {
                position: absolute;
                top: 0;
                left: 0;
                padding: var(--cxl-size-28) var(--cxl-size-16) var(--cxl-size-16) var(--cxl-size-16);
                box-sizing: border-box;
                background-color: var(--cxl-color-f2f6f8);
            }
        }
        .msg-time {
            font-size: var(--cxl-size-12);
            color: var(--cxl-color-999999);
            margin: var(--cxl-size-14) 0 0 0;
        }
        .msg-content {
            font-size: var(--cxl-size-12);
            color: var(--cxl-color-333333);
            margin: var(--cxl-size-24) 0 0 0;
        }
    }
}
</style>
